<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#F00"></u-tabs>
		<view class="order-list-box">
			<view class="order" v-for="(res, rindex) in orderList" :key="rindex">
				<view class="top">
					<view class="left">
						<view class="store1">{{ res.order_sub_no }}</view>
					</view>
					<view class="right">{{ getStatusText(res.fod_status) }}</view>
				</view>
				<view class="item">
					<view class="left"><image :src="photo_base_url + res.goods_cover" mode="aspectFill"></image></view>
					<view class="content">
						<view class="title u-line-2">{{ res.goods_name }}</view>
						<view class="type">{{ res.goods_option_title }}</view>
					</view>
					<view class="right">
						<view class="price">
							￥{{ fenZhuanYuan(res.sell_price) }}
						</view>
						<view class="number">x{{ res.total }}</view>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						实付:
						<text class="total-price">
							￥{{ (fenZhuanYuan(res.paid)) }}
						</text>
					</view>
					<view class="right">
						佣金:
						<text class="yongjin">
							￥{{ (fenZhuanYuan(res.brokerage)) }}
						</text>
					</view>
				</view>
			</view>
			
			<view class="list-loadmore">
				<u-loadmore :status="loadStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待结算'
				}, {
					name: '已结算'
				}, {
					name: '已退款'
				}],
				current: 0,
				
				orderList:[],
				orderPage:0,
				orderEnd:false,
				logisticsShow:false,
				logisticsOrderNo:'',
				photo_base_url:'',
				loadStatus: 'loading',
				tmpIdx: 0,
				next_status_text: [],
				status_text: [],
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt2() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		onLoad() {
			this.reloadOrderList();
		},
		onReachBottom() {
			this.getNextPageData()
		},
		methods: {
			change(index) {
				this.current = index;
				this.tmpIdx = this.current;
				this.reloadOrderList();
			},
			// 价格整数
			priceInt(val){
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			},
			reloadOrderList(){
				this.orderPage = 0
				this.orderEnd = false
				this.loadStatus = 'loading'
				this.getOrderList(this.tmpIdx)
				uni.showLoading()
			},
			getNextPageData(){
				if (this.orderEnd){
					return
				}
				this.loadStatus = 'loading'
				this.getOrderList(this.tmpIdx)
			},
			// 页面数据
			getOrderList(idx) {
				const that = this
				if (that.orderEnd){
					return
				}
				that.tmpIdx = idx
				that.orderPage++
				that.$api.fenxiao.getOrderList({
					status:that.getStatusByIdx(idx),
					page:that.orderPage,
					}).then(res => {
						uni.hideLoading()
						if (that.orderPage < 2){
							that.next_status_text = res.next_status_text
							that.status_text = res.status_text
							that.photo_base_url = res.photo_base_url
							
							that.orderList = res.list
						}
						else {
							that.orderList = that.orderList.concat(res.list)
						}
						if (res.page_info.has_more){
							that.loadStatus = 'loadmore'
						} else{
							that.orderEnd = true
							that.loadStatus = 'nomore'
						}
				})
			},
			getStatusByIdx(idx){
				return idx
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.sell_price * val.total);
				});
				return this.fenZhuanYuan(price);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.total;
				});
				return num;
			},
			fenZhuanYuan(_price){
				return (_price / 100).toFixed(2)
			},
			getNextStatusText(_status){
				if(this.next_status_text[_status]){
					return this.next_status_text[_status]
				} else {
					return '未知'
				}
			},
			getStatusText(_status){
				if(this.status_text[_status]){
					return this.status_text[_status]
				} else {
					return '未知'
				}
			},
			gotoOrderDetails(_row){
				// this.$myRouter.push({name:'member/order_details',params:{id:_row.id}})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	@import '@/static/css/member_order_list.scss';
	.total-price{
		color: #E41F19;
		font-weight: 700;
	}
	.yongjin{
		color: #c79f45;
		font-weight: 700;
	}
	.fanyong{
		margin-top:20upx;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		margin-top: 0;
	}
</style>